<!-- 编辑权限 -->
<template>
    <page-header-wrapper @back="() => $router.go(-1)">
        <a-card :bordered="false" title="基本信息">
            <a-form-model :model="info" ref="ruleForm" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }">
                <a-form-model-item label="姓名" prop="userName">
                    <a-input v-model="info.userName" allow-clear placeholder="请输入姓名" />
                </a-form-model-item>
                <a-form-model-item label="手机号" prop="mobile">
                    <a-input v-model="info.mobile" allow-clear placeholder="请输入手机号" />
                </a-form-model-item>
                <a-form-model-item v-if="info.id == ''" label="初始密码" help="未填写默认88888888，6-20位，支持数字，字母，区分大小写">
                    <a-input v-model="info.password" allow-clear placeholder="请输入初始密码" />
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card :bordered="false" title="功能权限设置">
            <a-tree
                v-model="checkedKeys"
                checkable
                :defaultExpandAll="true"
                :selected-keys="selectedKeys"
                :defaultSelectedKeys="defaultSelectedKeys"
                :checkStrictly="true"
                :tree-data="treeData"
                @select="onSelect"
            />
            <a-form-model :wrapperCol="{ span: 15 }" style="text-align: center">
                <a-button @click="submit" :disabled="isload" type="primary">保存</a-button>
            </a-form-model>
        </a-card>
    </page-header-wrapper>
</template>

<script>
import { treeData } from './treeData';
import { treeData2 } from './treeData2';
import { createUserStaff , userStaffDetail , updateUserStaff } from '@/api/services/power';
import { USER_TYPE } from '@/store/mutation-types';
export default {
    data () {
        return {
            info: {
                id: '',
                userName: '', // 姓名
                mobile: '', // 手机号
                password: '', // 初始密码
            },
            rules: {
                userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
                ],
            },
            expandedKeys: [],
            autoExpandParent: true,
            checkedKeys: {},
            selectedKeys: [],
            defaultSelectedKeys: [],
            treeData: [],
            isload: false,
        };
    },
    watch: {
        checkedKeys(val) {
        console.log('onCheck', val);
        },
    },
    created(){
        var userType = sessionStorage.getItem(USER_TYPE);
        this.treeData = userType == '2' ? treeData : treeData2;
        if(this.$route.query.id){
            this.getDetail(this.$route.query.id);
        }
    },
    methods: {
        onExpand(expandedKeys) {
            console.log('onExpand', expandedKeys);
            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
            // or, you can remove all expanded children keys.
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onCheck(checkedKeys) {
            console.log('onCheck', checkedKeys);
            this.checkedKeys = checkedKeys;
        },
        onSelect(selectedKeys, info) {
            console.log('onSelect', info);
            this.selectedKeys = selectedKeys;
        },
        // 保存操作员权限
        submit(){
            let _this = this;
            _this.$refs.ruleForm.validate(valid => {
                if(valid){
                    _this.isload = true;
                    _this.info.resourceId = _this.checkedKeys.checked
                    console.log(_this.info,'info')
                    var api = _this.info.id == '' ? createUserStaff(_this.info) : updateUserStaff(_this.info);
                    api.then(res => {
                        _this.isload = false;
                        if(res.success){
                            _this.$notification['success']({
                                message: '温馨提示',
                                description: '操作成功',
                                duration: 8
                            })
                            _this.$router.go(-1)
                        }else{
                            _this.$notification['error']({
                                message: '温馨提示',
                                description: res.errMessage,
                                duration: 8
                            })
                        }
                    })
                }
            })
        },
        // 获取员工详情信息
        getDetail(id){
            let _this = this;
            userStaffDetail(id)
            .then(res => {
                if(res.success){
                    _this.info = JSON.parse(JSON.stringify(res.data))
                    _this.info.id = id
                    _this.checkedKeys.checked = res.data.resourceId
                    _this.defaultSelectedKeys = res.data.resourceId
                    // _this.checkedKeys.halfChecked = []
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
    }
}

</script>
<style scoped>

</style>